 <html>
 <head>
 <meta charset="UTF-8">
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
 <script type="text/javascript" src="ajaxfileupload.js"></script>
<script type="text/javascript">
function doSelect(id,val){
	$("#"+id).val(val);
}

function strToJson(str){ 
	var json = eval('(' + str + ')'); 
	return json; 
	} 

function uploadImg(id) {
	if ("" == $("#"+id+"-file").val()) {
		$.messager.alert('提示', '请先选择要上传的图片', 'info');
	} else {
		$.ajaxFileUpload({
			url : '/photo/upload',
			secureuri : false,
			fileElementId : id+'-file',//file标签的id  
			dataType : 'json',//返回数据的类型  
			data:{"type":1,"bizid":${photoVo.projectId}},
			success : function(data, status) {
				var json = data;
				if (json.code!=1) {
					$.messager.alert('错误', json.code, 'error');
				} else {
					var newId="#"+id+"-img";
					$(newId).attr("src",
							"/image/" + json.path);
					$(newId).attr("path",json.path);
					$("#"+id+"-name").val(json.name);
					//使用数据库中最新的id
					if(json.id){
						console.log("id变更了，oldId="+id+",newId="+json.id);
						$("#"+id).attr("newid",json.id);
					}
				}

			},
			error : function(data, status, e) {
				$.messager.alert('提示', '上传失败，图片格式不正确或大小超过1M', 'info');
			}
		});
	}

}
</script>
</head>
<body>
 <button id="add">增加</button>

<table border="1" cellspacing="0" cellpadding="0" width="100%">
	<thead>
		<tr><th width="5%">图片名称</th>
		<th width="4%">排序</th>
		<th width="4%">主图</th>
		<th width="10%">图片描述</th>
		<th width="40%">效果</th>
		<th width="5%">操作</th></tr>
	</thead>
	<tbody id="tbody">
		<#list photoVo.photoList as photo>

		<tr id="${photo.id}" class="tr">
			<td ><input id="${photo.id}-name" type="text" value="${photo.name}" /></td>
			<td><select id="${photo.id}-sort" class="sort">					
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="0">0</option>
			</select></td>
			<td><select id="${photo.id}-cover" owner="${photo.id}"
				class="cover">				
					<option value="0">否</option>
					<option value="1">是</option>
			</select></td>
			<td><input type="text" id="${photo.id}-remark" value="${photo.remark}" /></td>
			<td>
			 <input type="file" id="${photo.id}-file" name="file"
				style="width: 264px" onchange="uploadImg(${photo.id});">
				<#if photo.url != null>
				<img
				id="${photo.id}-img" src="/image/${photo.url}" path="${photo.url}"
				height="200px">
				<#else>
				<img
				id="${photo.id}-img" src="" path=""
				height="200px">
				</#if>
				</td>
			<td><a id="${photo.id}-del" owner="${photo.id}"
				href="javascript:;" class="del">删除</a></td>
		</tr>
		    <script>
                $(function() {
                	doSelect("${photo.id}-cover","${photo.cover}");
                	doSelect("${photo.sort}-sort","${photo.sort}");
                });
             </script>
		</#list>
	</tbody>

</table>
<input id="save" type="button" value="保存" />

<script type="text/javascript">
/* function open(url) {
	var actionUrl = $("#base").val()+"/"+url
	var mainPage=$('#mainPage');
	if(mainPage!=null){
	 mainPage.panel('open').panel('refresh',actionUrl);
	}
} */
	$(function() {	
		bindSaveEvent();
		bindDelEvent();
		bindCoverChangeEvent();
		bindAddEvent();
	 });
	
	function bindAddEvent(){
		console.log("bindAddEvent");
		$("#add").on("click", function() {
			var strTemplate=
				'<tr id="{photo.id}" newid="" class="tr">'+
			'<td><input id="{photo.id}-name" type="text" value="" /></td>'+
			'<td><select id="{photo.id}-sort" class="sort">'+					
					'<option value="1">1</option>'+
					'<option value="2">2</option>'+
					'<option value="3">3</option>'+
					'<option value="4">4</option>'+
					'<option value="5">5</option>'+
					'<option value="6">6</option>'+
					'<option value="7">7</option>'+
					'<option value="8">8</option>'+
					'<option value="9">9</option>'+
					'<option value="10">10</option>'+
					'<option value="0">0</option>'+
			'</select></td>'+
			'<td><select id="{photo.id}-cover" owner="{photo.id}"'+
				'class="cover">'+				
					'<option value="0">否</option>'+
					'<option value="1">是</option>'+
			'</select></td>'+
			'<td><input type="text" id="{photo.id}-remark" value="" /></td>'+
			'<td><input type="file" id="{photo.id}-file" name="file"'+
				'style="width: 264px" onchange="uploadImg({photo.id});"><img'+
				' id="{photo.id}-img" src="" path=""'+
				' height="200px"></td>'+
			'<td><a id="{photo.id}-del" owner="{photo.id}"'+
				'href="javascript:;" class="del">删除</a></td>'+
		'</tr>';
			var photoId = new Date().getTime();
			var html = strTemplate.replace(/{photo.id}/g,photoId);
			var tbody = $("#tbody");
			tbody.append(html);
			console.log(html);
			//必须为新生成的对象，重新绑定事件
			bindDelEvent();
			bindCoverChangeEvent();
		});
	
	}
	
	function bindSaveEvent(){
		console.log("bindSaveEvent");	
		$("#save").on("click", function() {
			var trs=$(".tr");
			var photos = new Array();
			$.each(trs,function(i,n){
				var tr = $(trs[i]);
				var photo ={};
				//newid是数据库中的id
				var id=tr.attr("id");
				var newid=tr.attr("newid");
				photo.id=null;
				//优先使用newid
				if(newid != null){
 				   photo.id=newid;
				}else if(id != null){
				   photo.id=id;
				}
				photo.cover=$("#"+id+"-cover").val();
				photo.sort=$("#"+id+"-sort").val();
				photo.remark=$("#"+id+"-remark").val();
				photo.url=$("#"+id+"-img").attr("path");
				photo.name=$("#"+id+"-name").val();
				console.log("id="+id);
				photos[i]=photo;
			});
			var json=JSON.stringify(photos);
			console.log("id=${photoVo.projectId}"+",photos="+json);
			$.ajax( {    
			    url:'savePhoto',
			    data:{    
			    	id : ${photoVo.projectId},
			    	photos: json
			    },    
			    type:'post',    
			    cache:false, 
			    async: true,
			    dataType:'json',    
			    success:function(data) {
			    	//alert(data.itemName);
			    	//nameStr = data.itemName;
			    	console.log("data="+data);
			    },    
			     error : function() {    
			         alert("保存图片失败！");   
			    }    
			});  
		});
	}
	
	function bindDelEvent(){
		console.log("bindDelEvent");
		$(".del").on("click",function(){
			var id=$(this).attr("owner");
			$("#"+id).remove();
		});
	}
	
	function bindCoverChangeEvent(){
		console.log("bindCoverChangeEvent");
		$(".cover").change(function(){
			console.log("cover change");
			var id=$(this).attr("id");
			var val=$(this).val();
			//只能存在1个主图
			//当前选择的cover=1，其它cover为0
			if(val == 1){
			var covers=$(".cover");
			console.log(covers.length);
			 $.each(covers,function(i,n){
				 console.log("aaa");
				var cover = covers[i];
				var nowId=$(cover).attr("id");
				if(nowId != id){
					doSelect(nowId,0);
				}else{
					doSelect(nowId,1);
				}
			  });
			}
		});
	}
	

</script>
</body>
</html>